<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        2d的属性 transform(改变)
                x轴 水平 左右
                y轴 垂直  上下

                偏移 translate  默认是X轴  单位是px 百分比  可以取负值
                     X轴 取值为正往右，取值为负往左
                     Y轴 取值为正往下，取值为负往上
                     transform: translateX(300px) translateY(300px); 
                     transform: translate(300px,300px); 
                        逗号前面300px代表的是X轴，逗号后面300px代表的是Y轴

                旋转 rotate 默认是Z轴  单位是deg 可以取负值  
                    X轴 上下旋转
                    Y轴 左右旋转
                    默认Z轴是旋转 
                    transform: rotateX(360deg) rotateY(360deg);
 
                    
                缩放 scale 默认X Y同时  单位 可以取负值（翻转）
                    比1大表示放大
                    比1小表示缩小 
                    X轴就相当于宽度进行放大或者缩小
                    Y轴就相当于高度进行放大或者缩小 
                     transform: scaleX(2) scaleY(.9); 
                     transform: scale(2,.9);
                      逗号前面2代表的是X轴进行放大或者缩小，逗号后面.9代表的是Y轴放大或者缩小

                倾斜
     -->
     <style>
        .all{
            width:200px; height:200px;
            background: pink;
            transition: all 3s linear;
            margin:200px auto  0;
        }
        .all:hover{
           /* transform: scale(1.5); */
           /* transform: scaleX(2) scaleY(.9); */
           transform: scale(2,.9);
            
        }
    </style>
</head>
<body>
    <div class="all">缩放</div>   
</body>
</html>